<template>
    <div class="wrapper">
		
		<div class="util">
			<el-button type="primary" class="add-button" plain @click="add(0, 1)">添加类别</el-button>
			<span>类别名称：</span>
			<el-input
				style="width: 260px;"
				placeholder="商品类别"
				v-model="searchValue"
			>
				<template #append>
					<el-button :icon="Search" @click="search()">
					</el-button>
				</template>
			</el-input>
		</div>
		
		<div class="main">
			<el-table
				:data="tableData"
				row-key="id"
				:header-cell-style="{background:'#F3F4F7',color:'#555',}"
			>
				<el-table-column label="类别名称" prop="name"></el-table-column>
				<el-table-column label="类别类型">
					<template #default="scope">
						<span v-if="scope.row.level === 1">
							<el-tag type="primary">一级类别</el-tag>
						</span>
						<span v-else-if="scope.row.level === 2">
							<el-tag type="info">二级类别</el-tag>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="类别描述" prop="description"></el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<el-button v-if="scope.row.level !== 2" type="info" plain size="small" @click="add(scope.row.id, scope.row.level + 1)">添加下级</el-button>
						<el-button type="primary" size="small" @click="update(scope.row.id)">修改</el-button>
						<el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
					</template>
					
				</el-table-column>
			</el-table>
		</div>
		<el-dialog
			v-model="dialog.show"
			:title="dialog.title"
			width="450px"
			:close-on-click-modal="false"
		>
			<Dialog
				v-if="dialog.show"
				@getTableData="getTableData"
				v-model:show="dialog.show"
				:id="dialog.id"
				:level="dialog.level"
				:parentId="dialog.parentId"
			></Dialog>
		
		</el-dialog>
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { copy } from 'copy-anything'
import { reactive, ref } from 'vue'
import { get, post } from '@/plugins/axios'
import url from './pathUtil'
import { ElMessage, ElMessageBox } from 'element-plus';
import Dialog from './dialog'

/* -------------------------数据部分------------------------------ */
//ref式响应数据一定要用.value来修改
const tableData = ref([])
//存储备份数据
const allTableData = ref([])
const params = reactive({})
const formObj = null
const dialog = reactive({
	title: '',
	id: '',
	show: false,
	parentId: null,
	level: null
})
const searchValue = ref('')

/* -------------------------函数部分------------------------------ */
//获取表格数据
getTableData()
function getTableData() {
	get(url.list, params, content => {		
		tableData.value = copy(content)
		allTableData.value = copy(content)
	})
}
//删除
function del(id) {
	if(null != id) {
		const text = '确定要删除该类别吗'
		ElMessageBox.confirm(text, '警告', {
			type: 'warning'
		}).then(() => {
			post(url.del, { id }, content => {
				getTableData()
			},formObj)
		})
	}
}
//添加 传参为了后续给数据库相应的参数
function add(parentId, level) {
	dialog.title = '添加类别'
	dialog.show = true
	dialog.id = null
	dialog.level = level
	dialog.parentId = parentId
}
//修改
function update(id) {
	dialog.id = id
	dialog.title = '修改类别'
	dialog.show = true
}
//搜索
function search() {
	// 还原 搜索全部数据
	tableData.value = copy(allTableData.value)
	//去除全部空格
	if(searchValue.value.trim() !== '') {
		//这两个console.dir()会输出同样的内容 因为tableData.value是地址 会输出这个地址的内容
		//console.dir(tableData.value)
		find(searchValue.value.trim(), tableData.value)
		//console.dir(tableData.value)
		
	}else {
		ElMessage({
			message: '您的输入框为空，已为您展示全部数据',
			type: 'warning'
		})
	}
}
//查找函数
function find(target, table) {
	for(let i = 0; i < table.length; i++) {
		if(table[i].children.length > 0) {
			//递归再次调用 查询子节点
			find(target, table[i].children)
		}
		//查询逻辑  孩子数量为0才删除
		if(table[i].name.indexOf(target) < 0 && table[i].children.length === 0) {
			table.splice(i, 1)
			i--;
		}
	}
}
</script>

<style lang="scss" scoped>
.wrapper{
	height: 80vh;
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		.add-button{
			margin-left: 20px;
			margin-right: 809px;
		}
		span{
			font-size: 14px;
			margin-left: 20px;
		}
	}
	.main{
		width: 100%;
        min-height: 580px;
		padding: 20px;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 2px 0px 10px rgba(0,0,0,0.2);
		
	}
}
</style>